<h1 class="page-title"><?php echo $this->translate('checkout'); ?></h1>
<div class="fieldset">
    <h2 class="legend"><?php echo $this->translate('cart'); ?></h2>
    <ul class="form-list">
        <li class="fields">
            <?php if($this->subtotal > 0): ?>
            <table id="cart-items">
                <thead>
                    <th>
                        <?php echo $this->translate('image'); ?>
                    </th>
                    
                    <th>
                        <?php echo $this->translate('product name'); ?>
                    </th>
                    
                    <th>
                        <?php echo $this->translate('quantity'); ?>
                    </th>
                    
                    <th>
                        <?php echo $this->translate('price'); ?>
                    </th>
                    
                    <th>
                        <?php echo $this->translate('total'); ?>
                    </th>
                    <th>
                        &nbsp;
                    </th>
                </thead>
                <tbody>
                    <?php foreach($this->items as $item): ?>
                    <tr id="i<?php echo $item['id']; ?>">
                        <td id="image">
                            <img style="width: 100px !important; height: auto !important;" src="<?php echo $this->baseUrl('/upload/') . $item['image']; ?>" alt="<?php echo $item['name']; ?>" />
                        </td>
                        
                        <td id="name">
                            <a href="<?php echo $this->url(array('name' => $this->ConvertStringToURL($item['name']), 'id' => $item['id']), 'product_detail', true) ?>" title="<?php echo $item['name']; ?>">
                                <?php echo $item['name']; ?>
                            </a>
                        </td>
                        
                        <td id="quantity">
                            <input type="hidden" name="id" value="<?php echo $item['id']; ?>" />
                            <input type="hidden" name="price" value="<?php echo $item['price']; ?>" />
                            <select id="qty" name="qty">
                                <?php for($i = 1; $i <= 20; $i ++): ?>
                                <option <?php if($i == $item['qty']) echo 'selected="selected"'; ?> value="<?php echo $i; ?>"><?php echo $i; ?></option>
                                <?php endfor; ?>
                            </select>
                        </td>
                        
                        <td id="price">
                            <?php echo number_format($item['price'], 0, null, "."); ?>đ
                        </td>
                        
                        <td id="subtotal">
                            <?php echo number_format($item['subtotal'], 0, null, "."); ?>đ
                        </td>
                        <td id="delete">
                            <a onclick="removeFromCart('<?php echo $item['id']; ?>', 'true');" href="#i<?php echo $item['id']; ?>" title="Remove">
                                <img src="<?php echo $this->templateURL; ?>/images/delete_item_btn.png" alt="Remove" title="Remove" />
                            </a>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
                <tfoot>
                    <tr>
                        <td id="textTotal" colspan="4">
                            <?php echo $this->translate('total'); ?>
                        </td>
                        
                        <td id="total" colspan="2">
                            <?php echo number_format($this->subtotal, 0, null, "."); ?>đ
                        </td>
                    </tr>
                </tfoot>
            </table>
            <?php else: ?>
            <p><?php echo $this->translate('no item in cart'); ?></p>
            <?php endif; ?>
        </li>
    </ul>
    
    <div class="buttons-set">
        <a href="<?php echo $this->baseUrl(); ?>" title="<?php echo $this->translate('home'); ?>" class="f-left">&laquo; <?php echo $this->translate('home'); ?></a>
        <a href="<?php echo $this->url(array(), 'cart_checkout', true); ?>" title="Submit" class="colors-btn"><span><span><?php echo $this->translate('checkout'); ?></span></span></a>
        <div class="clear"></div>
    </div>
</div>
<script>
$(".banner-wrapper").remove();

$("select#qty").change(function(){
    var qty = $(this).val();
    var id = $(this).parent("td#quantity").children("input[name='id']").val();
    var price = $(this).parent("td#quantity").children("input[name='price']").val();
    
    $.ajax({
        url: "<?php echo $this->url(array(), 'addCart', true); ?>",
        data: {'id': id, 'qty': qty, 'price': price},
        success: function callback(e){
            window.location.reload();
        }
    });
});
</script>
<style>
table#cart-items{
    width: 100%;
}

table#cart-items, table#cart-items tr, table#cart-items th, table#cart-items td{
    border: 1px solid #e9e9e9;
}

table#cart-items th{
    text-transform: capitalize;
    font-weight: bold;
    font-size: 14px;
    padding: 10px 5px;
}

table#cart-items td{
    vertical-align: middle;
    padding: 0 5px;
}

table#cart-items td#image{
    width: 15%;
    vertical-align: middle;
}

table#cart-items td#name{
    width: 40%;
}

table#cart-items td#quantity{
    width: 5%;
    text-align: center;
}

table#cart-items td#price{
    width: 15%;
    text-align: right;
}

table#cart-items td#subtotal{
    width: 15%;
    text-align: right;
}

table#cart-items td#delete{
    width: 5%;
    text-align: center;
}

table#cart-items td#textTotal{
    text-align: right;
    font-weight: bold;
    font-size: 14px;
}

table#cart-items td#total{
    text-align: center;
    font-weight: bold;
}

table#cart-items tfoot td{
    padding: 10px 5px;
}

</style>